import React, { memo, useRef } from "react";
import { View, Button } from "@tarojs/components";
import { Icon, Image, Overlay } from '@antmjs/vantui'
import { Painter } from "@/components"
import { QRCode } from 'taro3-code'


import textPalette from './palette/tests';
import './index.scss'

const InvitePoster = (props) => {

  const { show = false, close = () => { } } = props

  const painterRef = useRef<any>()
  const saveImage = () => {
    painterRef.current.saveImage()
  }




  // }, [])
  return (
    <View >
      <Overlay show={show} className='bgc-color'>
        <View className='wrapper'>
          <View className='close-icon'>
            <Icon name='close' size='30px' onClick={() => close()} />
          </View>
          <View className='canvas-box'>
            <View className='img-xiaoyi'></View>
            <View className='painter-footer'>
              <View className='left'>
                <Image width='88px' height='28px' src='https://static.hzddyy.com/saas_static_files_/7Axx5ed3SqNO8JfTZBaWSxqxkSlG2kq0GxrlPAwkJIs.png'></Image>
                <View className='text4 gry3'>识别二维码，下载APP体验吧~</View>
              </View>
              <View className='right'>
                <QRCode
                  text={props?.inviteUrl}
                  size={56}
                  scale={10}
                  errorCorrectLevel='M'
                  typeNumber={2}
                ></QRCode>
              </View>
            </View>
          </View>
          <Button className='save-btn' onClick={() => saveImage()}>保存到相册</Button>
        </View>
        <View className='painter'>
          <Painter
            customStyle=''
            palette={(new textPalette()).palette(props?.inviteUrl)}
            onImgOK={(e) => console.log(e.path)}
            onImgErr={(err) => { console.error('绘制失败', err) }}
            ref={painterRef}
          />

        </View>

      </Overlay >

    </View >

  );
};

export default memo(InvitePoster);
